<template>
  <div class="container">
    <rz-dialog
      :dialogVisible="dialogVisible"
      :width="width"
      :title="title"
      @onconfirm="onconfirm"
      @oncancel="oncancel"
    >
      <!-- 1213 -->
      <el-row type="flex">
        <el-col :span="24" style="display: flex">
          <span style="padding: 10px 10px 0 0">查询条件:</span>
          <div style="flex: 1">
            <el-select
              v-model="queryInfo.districtcode"
              placeholder="请选择单位所属区域"
            >
              <el-option
                v-for="item in regionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.bodyindustry"
              placeholder="请选择单位业态"
              clearable
            >
              <el-option
                v-for="item in bodyindustryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.peopleType"
              placeholder="请选择人员类别"
              clearable
            >
              <el-option
                v-for="item in dimension"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.codecolor"
              placeholder="请选择信息码"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in Information"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.position"
              placeholder="请选择职位状态"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in Position"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.unittype"
              placeholder="请选择其他类别"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
                  maxlength="50"
              v-model="queryInfo.searchValue"
              placeholder="请输入单位名称"
              style="width: 217px"
            ></el-input>
            <el-input
                  maxlength="50"
              v-model="queryInfo.custname"
              placeholder="请输入姓名"
              style="width: 217px"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              v-no-click
              @click="query"
              >查询</el-button
            >
          </div>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-row>
        <el-col :span="24" style="display: flex; justify-content: flex-end">
          <el-dropdown :hide-on-click="false">
            <el-button type="primary">
              <i class="el-icon-s-grid"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="el_dropdown_wapper">
              <el-dropdown-item v-for="(item, index) in list" :key="index">
                <el-checkbox v-model="item.value">{{ item.name }}</el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table :data="tableData" border style="width: 100%" stripe>
        <el-table-column
          prop="tname"
          label="姓名"
          width="80"
          v-if="list[0].value"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="80"
          v-if="list[1].value"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="80"
          v-if="list[2].value"
        >
        </el-table-column>

        <el-table-column
          prop="national"
          label="民族"
          width="80"
          v-if="list[3].value"
        >
        </el-table-column>
        <el-table-column
          prop="national"
          label="籍贯"
          width="180"
          v-if="list[4].value"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.province }}--{{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="联系电话"
          width="100"
          v-if="list[5].value"
        >
          <template slot-scope="scope">
            {{
              scope.row.mobile.substring(0, 3) +
                '****' +
                scope.row.mobile.substring(7, 11)
            }}
          </template>
        </el-table-column>

        <el-table-column
          prop="codecolor"
          label="信息码"
          width="100"
          v-if="list[6].value"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.codecolor == 0">待完善</span>
            <span v-if="scope.row.codecolor == 1" class="green">绿码</span>
            <span v-if="scope.row.codecolor == 2" class="yellow">黄码</span>
            <span v-if="scope.row.codecolor == 3" class="red">红码</span>
          </template>
        </el-table-column>

        <!-- list: [
        {
          name: "姓名",
          value: true,
        },
        {
          name: "性别",
          value: true,
        },
        {
          name: "年龄",
          value: false,
        },
        {
          name: "民族",
          value: false,
        },
        {
          name: "籍贯",
          value: false,
        },
        {
          name: "联系电话",
          value: true,
        },

        {
          name: "信息码",
          value: true,
        },
        {
          name: "到期日期",
          value: true,
        },
8
        {
          name: "身份证有效期",
          value: false,
        },
        {
          name: "健康证明有效期至",
          value: false,
        },

        // 9
        {
          name: "考试有效期至",
          value: false,
        },

        {
          name: "工作单位名称",
          value: true,
        },
    12
        {
          name: " 单位业态",
          value: false,
        },

        // 13
        {
          name: "单位所属区域",
          value: false,
        },

        {
          name: "人员类别",
          value: true,
        },
        {
          name: "职位状态",
          value: true,
        },
        // 16
        {
          name: "入职日期",
          value: false,
        },
        17
        {
          name: "身份证状态",
          value: false,
        },
        {
          name: "健康证明状态",
          value: false,
        },
        {
          name: "考试状态",
          value: false,
        },
        {
          name: "从事其他产品",
          value: false,
        },
      ], -->
        <el-table-column
          prop="validuntil"
          label="到期日期"
          width="100"
          v-if="list[7].value"
        >
        </el-table-column>
        <el-table-column
          prop="idvalid"
          label="身份证有效期至"
          width="100"
          v-if="list[8].value"
        >
        </el-table-column>
        <el-table-column
          prop="jkvalid"
          label="健康证明有效期至"
          width="100"
          v-if="list[9].value"
        >
        </el-table-column>
        <el-table-column
          prop="ksvalid"
          label="考试有效期至"
          width="100"
          v-if="list[10].value"
        >
        </el-table-column>
        <el-table-column
          prop="unitname"
          label="工作单位名称"
          width="400"
          v-if="list[11].value"
        >
        </el-table-column>
        <el-table-column
          prop="bodyindustry"
          label="单位业态"
          width="150"
          v-if="list[12].value"
        >
        </el-table-column>
        <el-table-column
          prop="district"
          label="所属区域"
          width="100"
          v-if="list[13].value"
        >
        </el-table-column>
        <el-table-column
          prop="isadmin"
          label="人员类别"
          width="100"
          v-if="list[14].value"
        >
        </el-table-column>
        <!-- 姓名（默认）、性别（默认）、年龄、民族、籍贯、联系电话（默认）、信息码（默认）、到期日期（默认）、
      身份证有效期至、健康证明有效期至、考试有效期至、工作单位名称（默认）、单位业态、
      单位所属区域、人员类别（默认）、职位状态【全职】（默认）、入职日期、
      身份证状态（红，黄，绿，待完善）、健康证明状态（红，黄，绿，待完善）、
      考试状态（红，黄，绿，待完善）、从事其他产品 -->
        <el-table-column
          prop="position"
          label="职位状态"
          width="100"
          v-if="list[15].value"
        >
        </el-table-column>
        <el-table-column
          prop="entrytime"
          label="入职日期"
          width="100"
          v-if="list[16].value"
        >
        </el-table-column>
        <el-table-column
          prop="dabhstate"
          label="身份证状态"
          v-if="list[17].value"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.dabhstate == 0">待完善</span>
            <span v-if="scope.row.dabhstate == 1" class="green">有效期内</span>
            <span v-if="scope.row.dabhstate == 2" class="yellow">即将到期</span>
            <span v-if="scope.row.dabhstate == 3" class="red">已到期</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="jkzstate"
          label=" 健康证明状态"
          v-if="list[18].value"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.jkzstate == 0">待完善</span>
            <span v-if="scope.row.jkzstate == 1" class="green">有效期内</span>
            <span v-if="scope.row.jkzstate == 2" class="yellow">即将到期</span>
            <span v-if="scope.row.jkzstate == 3" class="red">已到期</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ksstate"
          label="考试状态"
          v-if="list[19].value"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ksstate == 0">待完善</span>
            <span v-if="scope.row.ksstate == 1" class="green">有效期内</span>
            <span v-if="scope.row.ksstate == 2" class="yellow">即将到期</span>
            <span v-if="scope.row.ksstate == 3" class="red">已到期</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="unittype"
          label="从事其它产品"
          width="260"
          v-if="list[20].value"
        >
          <template slot-scope="scope">
            {{ scope.row.unittype.replace(/&/g, ',') }}
          </template>
        </el-table-column>
      </el-table>
      <div class="paginations">
        <el-pagination
          :current-page.sync="queryInfo.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </rz-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '50%',
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '添加/编辑',
    },
    type: {
      type: Number,
    },
    districtcode: {
      type: String,
      default: '320500',
    },
  },
  // props:[],
  // 页面加载
  created() {
    switch (this.type) {
      case 0:
        this.queryInfo.bodyindustry = '食品生产企业';
        break;
      case 1:
        this.queryInfo.bodyindustry = '餐饮服务经营者';
        break;
      case 2:
        this.queryInfo.bodyindustry = '食品流通经营者';
        break;
      case 3:
        this.queryInfo.bodyindustry = '集中用餐单位食堂';
        break;
      case 4:
        this.queryInfo.peopleType = '1';
        break;
      case 5:
        this.queryInfo.peopleType = '2';
        break;
      case 6:
        this.queryInfo.peopleType = '3';
        break;
      case 10:
        this.queryInfo.codecolor = '1';
        break;
      case 11:
        this.queryInfo.codecolor = '2';
        break;
      case 12:
        this.queryInfo.codecolor = '3';
        break;
      case 13:
        this.queryInfo.codecolor = '4';
        break;
      case 7:
        this.queryInfo.unittype = '特殊食品';
        break;
      case 8:
        this.queryInfo.unittype = '从事食用农产品';
        break;
      case 9:
        this.queryInfo.unittype = '从事冷藏冷冻农产品';
        break;
    }
    this.queryInfo.districtcode = this.districtcode
      ? this.districtcode
      : '320500';
    this.query();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      isdisabled: false,
      queryInfo: {
        districtcode: '',
        bodyindustry: '',
        isPage: 0,
        page: 1,
        pageSize: 10,
        searchValue: '',
        codecolor: '',
        peopleType: '',
        custname: '',
        position: '',
        unittype: '',
      },
      total: 0,
      regionList: [
        {
          value: '320500',
          label: '苏州市',
        },
        {
          value: '320506',
          label: '吴中区',
        },

        {
          value: '320507',
          label: '相城区',
        },
        {
          value: '320505',
          label: '高新区',
        },
        {
          value: '320508',
          label: '姑苏区',
        },
        {
          value: '320509',
          label: '工业园区',
        },
        {
          value: '320581',
          label: '常熟市',
        },
        {
          value: '320582',
          label: '张家港市',
        },
        {
          value: '320583',
          label: '昆山市',
        },
        {
          value: '320584',
          label: '吴江区',
        },
        {
          value: '320585',
          label: '太仓市',
        },
        {
          value: '320592',
          label: '张家港保税区',
        },
      ],
      bodyindustryList: [
        {
          value: '食品生产经营者',
          label: '食品生产经营者',
        },
        {
          value: '食品流通经营者',
          label: '食品流通经营者',
        },
        {
          value: '餐饮服务经营者',
          label: '餐饮服务经营者',
        },
        {
          value: '单位食堂',
          label: '单位食堂',
        },
      ],
      dimension: [
        {
          value: '1',
          label: '从业人员',
        },
        {
          value: '3',
          label: '食品安全管理员',
        },
        {
          value: '2',
          label: '企业管理员',
        },
      ],

      Information: [
        {
          value: '1',
          label: '绿码',
        },
        {
          value: '2',
          label: '黄码',
        },
        {
          value: '3',
          label: '红码',
        },
        {
          value: '4',
          label: '待完善',
        },
      ],
      Position: [
        {
          value: '1',
          label: '全职',
        },
        {
          value: '2',
          label: '兼职',
        },
        {
          value: '3',
          label: '入职待确认',
        },
      ],
      category: [
        {
          value: '特殊食品',
          label: '特殊食品',
        },
        {
          value: '从事食用农产品',
          label: '从事食用农产品',
        },
        {
          value: '从事冷藏冷冻农产品',
          label: '从事冷藏冷冻农产品',
        },
      ],
      tableData: [],

      list: [
        {
          name: '姓名',
          value: true,
        },
        {
          name: '性别',
          value: true,
        },
        {
          name: '年龄',
          value: false,
        },
        {
          name: '民族',
          value: false,
        },
        {
          name: '籍贯',
          value: false,
        },
        {
          name: '联系电话',
          value: true,
        },

        {
          name: '信息码',
          value: true,
        },
        {
          name: '到期日期',
          value: true,
        },

        {
          name: '身份证有效期',
          value: false,
        },
        {
          name: '健康证明有效期至',
          value: false,
        },

        // 9
        {
          name: '考试有效期至',
          value: false,
        },

        {
          name: '工作单位名称',
          value: true,
        },

        {
          name: ' 单位业态',
          value: false,
        },

        // 13
        {
          name: '单位所属区域',
          value: false,
        },

        {
          name: '人员类别',
          value: true,
        },
        {
          name: '职位状态',
          value: true,
        },
        // 16
        {
          name: '入职日期',
          value: false,
        },
        {
          name: '身份证状态',
          value: false,
        },
        {
          name: '健康证明状态',
          value: false,
        },
        {
          name: '考试状态',
          value: false,
        },
        {
          name: '从事其他产品',
          value: false,
        },
      ],
    };
  },
  // 方法
  methods: {
    oncancel() {
      this.$emit('oncancel');
    },
    onedit() {
      this.$emit('onedit');
    },
    onconfirm() {
      this.$emit('onconfirm');
    },
    // queryCongyeDetail
    query() {
      let data = this.$_.cloneDeep(this.queryInfo);
      data.bodyindustry = data.bodyindustry ? [data.bodyindustry] : [];
      data.codecolor = data.codecolor ? [data.codecolor] : [];
      console.log(data.districtcode);
      data.districtcode =
        data.districtcode == '320500' ? [] : [data.districtcode];
      data.peopleType = data.peopleType ? [data.peopleType] : [];
      data.position = data.position ? [data.position] : [];
      data.unittype = data.unittype ? [data.unittype] : [];
      this.$http
        .queryCongyeDetail(data)
        .then(res => {
            res.data.forEach(x => {
              for (const key in x) {
                if (!x[key]) {
                  x[key] = '--';
                }
              }
            });
            this.tableData = res.data;
            this.total = res.totalCount;
        })
    },
    handleSizeChange(e) {
      this.queryInfo.page = e;
      this.query();
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  /deep/ .el-select {
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .el-input {
    margin-right: 10px;
  }
  .paginations {
    padding: 10px 0;
    text-align: right;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
  .yellow {
    color: #fbaf22;
  }
}
</style>
